import { useEffect, useRef, useState } from 'react'
import Zizujianindex from './components/zizujian'
import Refindex from './components/Ref/index'
import ComputerName from './components/compute/index'
import './index.scss'
function Hooks() {

  const bt1Ref = useRef(null)
  const [refdata, setRefdata] = useState({ username: '11111', password: '3333' })
  const [ziInputzhi, setZiInputzhi] = useState('')
  // 用于销毁定时器，相当于vue的生命周期的销毁
  useEffect(() => {
    return () => {
      console.log('用于销毁定时器，相当于vue的生命周期的销毁')
    }
  }, [])
  function btFn() {
    setZiInputzhi(bt1Ref.current.inputRef.current.value)
    bt1Ref.current.changeName('修改后的子组件的值')
  }
  return (
    <div className="hooks martop" >
      <h1>组件传值并返回给父组件</h1>
      <div className="martop" >
        <Zizujianindex setRefdata={setRefdata} refdata={refdata} />
        <div>名称{refdata.username} </div>
        <div>密码{refdata.password} </div>
      </div>
      <h1>Ref使用子组件的方法</h1>
      <div >
        <button onClick={btFn}>子组件Ref</button>
        <Refindex ref={bt1Ref} />
      </div>
      <div className='martop5'>拿到的子组件输入框的值： {ziInputzhi}</div>
      <h1>计算属性</h1>
      <ComputerName />
    </div>
  )
}

export default Hooks
